import React, { FC, useState } from "react";
import styles from './QuestionCardSquare.module.scss'
import { DeleteOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks'
import { deleteQuestionsService } from ".././services/question";
import { message, Modal } from "antd";
type PropsType = {
    title: string
    isStar: boolean
    isPublished: boolean
    answerCount: number
    createAt: string
    Ids: string[]
}

const QuestionCardSquare: FC<PropsType> = (props: PropsType) => {
    const [isDeletedOver, setIsDeletedOver] = useState(false)
    const { title, answerCount, Ids } = props
    const { run: redelete } = useRequest(
        async () => await deleteQuestionsService(Ids),
        {
            manual: true,
            debounceWait: 500,//防抖 
            onSuccess() {
                message.success('删除成功')
                setIsDeletedOver(true)
            }
        }
    )
    const warning = () => {
        Modal.confirm({
            title: '删除',
            content: '您确定要永久删除吗？',
            cancelText:"取消",
            okText:"确定",
            onOk:redelete
        });
        
    };
    if (isDeletedOver) return null
    return <>
        <div className={styles.trashList} >
            <div className={styles.top}>
                <div className={styles.mask} >
                    <DeleteOutlined onClick={warning} className={styles.delete} />
                </div>
            </div>
            <div className={styles.bottom}>
                <p>{title}</p>
                <p>答卷数量 : {answerCount}</p>
            </div>
        </div>
    </>
}

export default QuestionCardSquare